<template>
<uni-shadow-root class="partials-banner-banner"><import src="firstBanner.wxml"></import>  
<import src="more_banner/index.wxml"></import>  

<block v-if="data.androidTemplate == """>
    <template is="firstBanner" :data="...data,sysWidth,...setting,imgs,imgData,danmuList,autoplay"></template> 
</block> 
<block v-if="data.androidTemplate == "more_banner"||data.androidTemplate ==="form_more_banner"">
    <template is="moreBanner" :data="...data,sysWidth,...setting,imgs,imgData,danmuList,autoplay"></template>
</block> 
<block v-if="(!data.androidTemplate&&data.androidTemplate != "")">
    <template is="firstBanner" :data="...data,sysWidth,...setting,imgs,imgData,danmuList,autoplay"></template>
</block></uni-shadow-root>
</template>
<wxs src="../../public/publicFun.wxs" module="publicFun"></wxs>
<script>
import ComponentTagVideo from '../video/video.vue'
global['__wxVueOptions'] = {components:{'component-tag-video': ComponentTagVideo}}

global['__wxRoute'] = 'partials/banner/banner'
const app = getApp();
Component({
  properties: {
    data: {
      type: JSON,
      value: 'default value',
    }
  },
  data: {
    someData: {},
    sysWidth:"",
    setting:{},
    imgs:null,
    imgData:'',
    autoplay:'',
  },
  ready:function(){
    let that=this;
    that.setData({
      sysWidth: app.globalData.sysWidth,
      setting:app.globalData.setting,
      autoplay:that.data.data.jsonData.autoplay||''
    });
    console.log("====banner====",that.data.data)
    let imgData = that.data.data.jsonData.images;
    let height=that.data.data.jsonData.height<10?that.data.data.jsonData.height * that.data.sysWidth+"px":that.data.data.jsonData.height+"rpx"
    for(let i=0;i<imgData.length;i++){
        let url=imgData[i].linkUrl||imgData[i].imagePath||'';
        console.log('==url===',url)
        if(url&&url.indexOf("v.qq.com")!=-1){
            imgData[i].type='video'
            imgData[i].jsonData={jsonData:{
                source:url,
                autoPlay:0,
                type:'video',
                id:'videoComponent_'+i,
                height:height,
                width:that.data.data.jsonData.width,
                poster:imgData[i].imageUrl||''
            }}
        }else if(url&&url.indexOf(".mp4")!=-1||url.indexOf(".avi")!=-1||url.indexOf(".wmv")!=-1){
            imgData[i].type='video_other';
            imgData[i].jsonData={jsonData:{
                source:url,
                autoPlay:0,
                type:'video_other',
                id:'videoComponent_'+i,
                height:height,
                width:that.data.data.jsonData.width,
                poster:imgData[i].imageUrl||''
            }}
        }else{
            imgData[i].type='img'
        }
    }
    that.setData({ imgData: imgData })
    console.log("=====banner--data=====", that.data.data,that.data.imgData)
  },
  methods: {
    stopBannerFun:function(state){
        let that=this;
        console.log("===stopBannerFun====",that.data.autoplay);
        let autoplay=that.data.autoplay;
        if(that.data.autoplay&&!state){
            that.setData({autoplay:false})
        }else if(that.data.initAutoplay&&state){
            that.setData({autoplay:true})
        }
    },
    getDataFun:function(e){
        let that=this;
        console.log("====getDataFun====",e)
        let state=e.detail.state;
        if(state=="play"){
            that.setData({ autoplay: '' })
        }else{
            that.setData({ autoplay: true })
        }
    },
    changeSwiperFun:function(e){
        // console.log("===changeSwiperFun===",e);
        let index=e.detail.current;
        let that=this;
        let imgData=that.data.imgData
        let idData='#videoComponent_'+index
        if(imgData[index].autoPlay&&imgData[index].type.indexOf('video')!=-1){
            that.selectComponent(idData).onStartPlay(index)
        }
        for(let i=0;i<imgData.length;i++){
            if(imgData[i].type.indexOf('video')!=-1&&index!=i){
                idData='#videoComponent_'+i
                that.selectComponent(idData).onStopPlay(i)
            }
        }
    },
    imageLoad: function (e) {
      let that=this;
      console.log("=====imageLoad====",e,that.data.data.jsonData.height,that.data.sysWidth)
      let index = e.currentTarget.dataset.index;
      let width = e.detail.width;
      let height = e.detail.height;
      let imgData = that.data.data.jsonData.images;
      let fixedHeght = Number(that.data.data.jsonData.height) * that.data.sysWidth;
      imgData[index].height = fixedHeght;
      imgData[index].width = (width / height ) * fixedHeght;
      that.setData({ imgs: imgData })
      console.log("=====imageLoad====", that.data.imgs)
    },
    tolinkUrl: function (event) {
      console.log(event.currentTarget.dataset.link)
      app.globalData.linkEvent(event.currentTarget.dataset.link);
    }
  },
})
export default global['__wxComponents']['partials/banner/banner']
</script>
<style platform="mp-weixin">
@import 'more_banner/index.css';/* 引入可以滑动的样式 */
.SwiperContainer{
  height: 9em;
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.SwiperIndex{
  width: 100%;
  height: 100%;
}
.SwiperIndex image{
  height:100%;
  width: 100%;
}
.productImg{
    border-radius: 20rpx;
}
.blcok{
  box-shadow: 0px 0px 18px rgba(0, 0,0, 0.16);
  border-radius: 20rpx;
  margin: 20rpx 0;
}
.sold_out_block{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 80rpx;
  z-index: 10;
}
</style>